<template>
    <div class='product-list-container'>
        <div class="sell-info-tip">
            <h3>为您推荐</h3>
        </div>

        <div class="feed-tab-wrapper">
            <ul>
                <li class="feed-tab-item test-begin">
                    <div class="feed-tab__item-title">
                        <span class="feed-tab__item-title-text">精选</span>
                    </div>
                    <div class="feed-tab__item-desc">猜你喜欢</div>
                    <div class="feed-tab__item-gap"></div>
                </li>
                <li class="feed-tab-item" @click="search('华为平板')">
                    <div class="feed-tab__item-title">
                        <span class="feed-tab__item-title-text">平板</span>
                    </div>
                    <div class="feed-tab__item-desc">华为平板</div>
                    <div class="feed-tab__item-gap"></div>
                </li>
                <li class="feed-tab-item" @click="search('手机')">
                    <div class="feed-tab__item-title">
                        <span class="feed-tab__item-title-text">手机</span>
                    </div>
                    <div class="feed-tab__item-desc">华为手机</div>
                    <div class="feed-tab__item-gap"></div>
                </li>
                <li class="feed-tab-item" @click="search('电脑')">
                    <div class="feed-tab__item-title">
                        <span class="feed-tab__item-title-text">电脑</span>
                    </div>
                    <div class="feed-tab__item-desc">联想电脑</div>
                    <div class="feed-tab__item-gap"></div>
                </li>
                <li class="feed-tab-item" @click="search('CPU')">
                    <div class="feed-tab__item-title">
                        <span class="feed-tab__item-title-text">CPU</span>
                    </div>
                    <div class="feed-tab__item-desc">Inter</div>
                    <div class="feed-tab__item-gap"></div>
                </li>
                <li class="feed-tab-item ">
                    <div class="feed-tab__item-title">
                        <span class="feed-tab__item-title-text">精选</span>
                    </div>
                    <div class="feed-tab__item-desc">猜你喜欢</div>
                </li>
            </ul>
        </div>

        <div class="product-list" v-if="allProductList.length > 0">
            <ul>
                <li v-for="product in allProductList">
                    <a class="p-list-all-a" @click="goProductDetail(product)">
                        <div class="product-img">
                            <img :src="product.spuImage" alt="">
                        </div>
                        <div class="more2_info">
                            <p class="more2_info_name" v-html="product.spuTitle"></p>
                            <div class="more2_info_price more2_info_price_plus more2_info_price_newcomer">
                                <div class="mod_price">
                                    <i>¥</i>
                                    <span class="more2_info_price_txt">
                                        {{ product.spuPrice }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <div v-if="allProductList.length == 0">
            <el-empty :image-size="400"></el-empty>
        </div>

    </div>
</template>
<script>
// 导入组件

import getUUID from '../utils/uuid';

// 导出模块
export default {
    // 模块名字
    name: 'navproductlist',
    // 模块数据
    data() {
        //数据
        return {
            allProductList: []
        };
    },
    // 注册组件
    components: {
    },
    methods: {

        // 搜索数据
        search(keyword){
            // this.$router.push({
            //     path: "/member/search",
            //     query:{
            //         search: keyword
            //     }
            // })
        },


        // 前往商品详情页
        goProductDetail(product) {
            this.$router.push({
                path: '/product/productdetail',
                query: {
                    spuId: product.spuId,
                    params: getUUID()
                }
            })
        },


        // 获取所有的二手商品
        getAllproduct() {
            this.$http({
                url: this.$http.adornUrl("/shitou-product/shitouproduct/spuinfo/getAllProduct"),
                method: 'post'
            }).then(({ data }) => {
                if (data.code == 200) {
                    this.allProductList = data.data
                } 
            })
        }
    },

    created() {
        this.getAllproduct()
    }
}
</script>
<style scoped>
@import url("../utils/css/navproductlist.css");
</style>
